import React, { Component } from 'react';
import { StyleSheet, View, Image, Platform, TextInput } from "react-native";
import { GLOBAL } from '../config/global';

const scale = GLOBAL.SCALE;

export class SearchInput extends Component {
	constructor(props) {
		super(props);
		this.state = {
			opacity: 0,
		}
		this.keyWord = this.props.initText || ''
	}
	shouldComponentUpdate (nextProps, nextState) {
		//兼容0.54、0.55版本中iOS输入框不能输入中文
		if (Platform.OS === 'ios') {
			if (this.keyWord !== nextState.keyWord) { //keyWord为所要获得的TextInput输入值，
				return false;
			}
		}
		return true;
	};
	render () {
		return (
			<View style={[styles.inputViewStyle, this.props.inputViewStyle ? this.props.inputViewStyle : null]}>
				{this.props.inputLeftIcon ? <Image source={this.props.inputLeftIcon} style={[styles.inputLeftIconStyle, this.props.inputLeftIconStyle ? this.props.inputLeftIconStyle : null]} /> : (null)}
				<TextInput
					//defaultValue={this.props.curKeyWord}
					ref={"searchInput"}
					style={[styles.inputStyle, this.props.inputStyle ? this.props.inputStyle : null]}
					underlineColorAndroid='transparent'
					maxLength={20}
					value={this.props.initText || this.keyWord}
					placeholder={this.props.placeholder}
					placeholderTextColor={this.props.placeholderTextColor ? this.props.placeholderTextColor : '#979797'}
					onChangeText={(txt) => {
						this.props.setKeyWord && this.props.setKeyWord(txt);
						this.props.onChangeText && this.props.onChangeText();
						this.keyWord = txt;
						if (Platform.OS != 'ios') {
							this.setState({ keyWord: txt })
						}
						// this.setState({ opacity: txt.length > 0 ? 1 : 0, keyWord: txt })
					}}
					onSubmitEditing={() => {
						this.props.onSubmitEditing && this.props.onSubmitEditing();
					}}
					onBlur={() => {
						this.props.onBlurFn && this.props.onBlurFn();
					}}
					returnKeyType={'search'}
				/>
				{/* <TouchableOpacity onPress={() => {
					this.refs.searchInput.clear();
					this.props.setKeyWord('');
					this.setState({ opacity: 0, keyWord: '' });
					this.props.onSubmitEditing();
				}} activeOpacity={0.5}>
					<Image source={inputClear} style={[styles.inputRightIconStyle, { opacity: this.state.opacity }, this.props.inputRightIconStyle ? this.props.inputRightIconStyle : null]} />
				</TouchableOpacity> */}
			</View >
		);
	}
}

const styles = StyleSheet.create({
	inputViewStyle: {
		marginLeft: 5 * scale,
		alignItems: 'center',
		flex: 1,
		flexDirection: 'row',
		height: 31 * scale,
		backgroundColor: '#F6F6F6',
		borderRadius: 4,
	},
	inputStyle: {
		padding: 0,
		flex: 1,
		height: 31 * scale,
		fontSize: 12 * scale,
		color: '#979797',
		marginLeft: 3 * scale,
	},
	inputLeftIconStyle: {
		height: 13 * scale,
		width: 13 * scale,
		marginLeft: 10 * scale,
		marginRight: 10 * scale,
	},
	inputRightIconStyle: {
		height: 10 * scale,
		width: 10 * scale,
		marginRight: 10 * scale,
	},
})